<template>
  <div class="wrapper-last">
    <div class="left-box">
      <el-table
        :data="state.tableData"
        height="782"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#a0cfff', color: 'black' }"
      >
        <el-table-column type="index" label="序号" width="100px" />
        <el-table-column prop="province" label="省份" />
        <el-table-column prop="city" label="城市" />
        <el-table-column prop="coverage" label="覆盖率" />
        <el-table-column prop="actual" label="今日应收" />
        <el-table-column prop="receivable" label="今日实收" />
        <el-table-column prop="balance" label="今日结余" />
      </el-table>
    </div>

    <div class="right-box">
      <el-card
        v-for="item in state.list"
        :key="item.id"
        @click="
          state.show = item.id;
          getList();
        "
        :class="state.show === item.id ? 'bai' : 'card'"
      >
        <h3>{{ item.title }}</h3>
        <br />
        <p style="color: #999; font-size: 14px">
          今日回款
          <span style="color: #649840">¥{{ item.receivable }} （万元）</span>
        </p>
        <p style="color: #999; font-size: 14px">
          今日结余
          <span style="color: #b65d59">¥ {{ item.balance }}（万元）</span>
        </p>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted } from "vue";
import { lan, tableList } from "@/http/chart.js";
const state = reactive({
  list: [],
  tableData: [], //表格数据
  show: 1,
});

const listgett = async () => {
  const res = await lan();
  state.list = res.data.regions;
};

const getList = async () => {
  const res = await tableList(state.show);
  state.tableData = res.data;
};

onMounted(() => {
  listgett();
  getList();
});
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.wrapper-last {
  width: 100%;
  display: flex;
  padding: 20px;
  .left-box {
    width: 891px;
    height: 782px;
    margin-right: 15px;
  }
  .right-box {
    width: 300px;
    .card {
      margin-bottom: 18px;
      width: 282px;
      height: 109px;
      padding: 20px;
      background: #f2f3f9;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      p {
        width: 240px;
        display: flex;
        justify-content: space-between;
      }
    }
    .bai {
      border-left: 5px solid lightskyblue;
      margin-bottom: 18px;
      width: 282px;
      height: 109px;
      padding: 20px;
      background: white;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      p {
        width: 240px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>